<template>
  <div class="dashboard-container">
    <!-- 上方三个数据卡片 -->
    <div class="top-boxes">
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">总数量</div>
          <div class="box-value">1000</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">未完成数量</div>
          <div class="box-value">20</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
      <div class="top-box">
        <div class="box-text">
          <div class="box-header">已完成数量</div>
          <div class="box-value">980</div>
        </div>
        <img src="/images/box.png" alt="box" class="box-img" />
      </div>
    </div>

    <!-- 下方环形图 -->
    <div class="chart-container">
      <div class="chart-top">
        <div class="chart-title">设备类型占比</div>
      </div>
      <div id="deviceChart" class="chart-content"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  const chartDom = document.getElementById('deviceChart');
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);
  const lineColor = '#34A4F3'; // 线条颜色

  const option = {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    // 调整图表内边距
    grid: { top: 20, right: 20, bottom: 60, left: 20 },
    graphic: {
      elements: [{
        type: 'image',
        key: 'device-image',
        style: {
          image: '/images/device.png',
          width: 100, // 减小中间图片尺寸
          height: 100
        },
        left: 'center',
        top: 'center'
      }]
    },
    series: [
      // 外部1条实线
      {
        type: 'pie',
        radius: ['85%', '85.5%'], // 调整半径
        color: 'transparent',
        label: { show: false },
        labelLine: { show: false },
        itemStyle: { borderWidth: 1, borderColor: lineColor },
        data: [{ value: 100 }]
      },

      // 中间主数据环
      {
        type: 'pie',
        radius: ['55%', '80%'], // 调整半径范围
        label: {
          show: true,
          position: 'outside',
          formatter: '{b} {c}%',
          fontSize: 12, // 减小字体
          color: '#333'
        },
        labelLine: {
          show: true,
          length: 10, // 缩短连线
          length2: 15,
          lineStyle: { color: (p: any) => p.name === '设备A' ? lineColor : '#00C48C' }
        },
        data: [{ value: 62, name: '设备A' }, { value: 38, name: '设备B' }],
        itemStyle: {
          color: (p: any) => p.name === '设备A' ? lineColor : '#00C48C',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },

      // 内部1条虚线
      {
        type: 'pie',
        radius: ['40%', '40.5%'], // 调整半径
        color: 'transparent',
        label: { show: false },
        labelLine: { show: false },
        itemStyle: {
          borderWidth: 1,
          borderType: 'dashed',
          borderColor: lineColor,
          borderDash: [3, 2]
        },
        data: [{ value: 100 }]
      }
    ],

    // 调整图例设置
    legend: {
      top: '96.3%',
      bottom: 0,
      left: 'center',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: { color: '#666', fontSize: 11 }, // 减小字体
      data: ['设备A', '设备B'],
      padding: [5, 20], // 减小内边距
      orient: 'horizontal',
      icon: 'circle'
    }
  };

  myChart.setOption(option);
  
  // 优化 resize 逻辑，确保响应式调整
  const handleResize = () => {
    myChart.resize({
      width: 'auto',
      height: 'auto'
    });
  };
  
  window.addEventListener('resize', handleResize);
  
  // 组件卸载时清理事件监听
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
});
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: calc(98vh - 80px); /* 调整高度，减去更多空间 */
}

.top-boxes {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.top-box {
  flex: 1;
  background: #f9fafc;
  border-radius: 8px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 80px; /* 减少卡片高度 */
}

.box-text { padding: 15px 0; }
.box-header { font-size: 12px; color: #909399; margin-bottom: 5px; }
.box-value { font-size: 24px; font-weight: 700; color: #333; }
.box-img { width: 50px; height: 50px; object-fit: contain; align-self: flex-end; }

.chart-container {
  flex: 1;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 0 10px 20px; /* 调整底部内边距，为图例留出更多空间 */
  box-sizing: border-box;
  min-height: 350px; /* 增加最小高度 */
}

.chart-top { 
  padding: 15px 10px; /* 增加顶部内边距 */
  border-bottom: 1px solid #eaeef2; 
}
.chart-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  position: relative;
  padding-left: 12px;
}

.chart-content {
  width: 100%;
  height: 400px; /* 增加图表高度 */
  margin: 10px auto 0; /* 调整上边距，使图表往下一点 */
}
</style>